<style type="text/css">
	li#previous.disabled a {color:#CCC}
	li#next.disabled a {color:#CCC}
</style>
<div class="row">
<div class="col-md-12">
	<div style="float:right;margin:10px 0px;">
	<form class="form-inline" id="msgSearchForm">
		<div class="form-group">
			<label for="type"> 消息时间: </label>
			<input type="text" name="time" class="Wdate form-control" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d',minDate:'%y-%M-{%d-5}'})" style="width:180px;height:34px;cursor:pointer;" readonly="readonly"
  								value="${response.result.time?number_to_datetime?string("yyyy-MM-dd HH:mm:ss")}">
		</div>
		<div class="form-group">
    	    <input type="text" class="form-control" id="key" name="key" value="${response.result.key!}" placeholder="关键字，支持模糊匹配">
  	    </div>
  	    <input type="hidden" id="cid" name="cid" value="${response.result.cid}">
  	    <input type="hidden" id="topicDiv" name="topic" value="${response.result.topic}">
  	    <input type="hidden" id="append" name="append" value="false">
  	    <input type="hidden" id="messageParam" name="messageParam" value="${response.result.serialize()}">
		<button type="button" onclick="searchMessage(false)" data-toggle='tooltip' title="查询消息时间前后一分钟内的消息" class="btn btn-search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
	</form>
	</div>
	<table id="dataTable" class="table table-striped table-hover" style="margin-top: 0px;word-break:break-all; word-wrap:break-all;">
		<colgroup>
			<col width="50px">
			<col width="155px">
			<col>
			<col width="80px">
			<col width="80px">
			<col width="50px">
		</colgroup>
		<thead>
			<tr>
				<td>序号</td>
				<td>发送时间</td>
				<td>消息</td>
				<td>keys</td>
				<td>tags</td>
				<td>详情</td>
			</tr>
		</thead>
		<tbody>
			<tr class="no_more_data"><td colspan=6 class="text-center">暂无数据</td></tr>
		</tbody>
	</table>
	<ul class="pager" id="pager" style="display:none;">
		<li id="previous" class="previous" onclick="previous()"><a href="javascript:void(0)">&larr; 上一页</a></li>
		<li>第<b id="pageNum"></b>页，命中数：<b id="sizeNum"></b>，检索数：<b id="searchNum"></b>，预估剩余数：<b id="leftNum"></b></li>
		<li id="next" class="next" onclick="next()"><a href="javascript:void(0)">下一页 &rarr;</a></li>
	</ul>
</div>
</div>
<!-- 消息轨迹 -->
<div id="trackModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog" id="trackSize">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">消息轨迹</h4>
			</div>
			<div class="modal-body">
				<div id="trackDiv"> </div>
			</div>
		</div>
	</div>
</div>
<div id="scriptDiv" style="display:none;"></div>
<script>
var pageNum = 0;
//显示分页
function showPage(num){
	pageNum = num;
	var comp = $("#data_"+num);
	var size = comp.attr("data_size");
	var search = comp.attr("data_search");
	var left = comp.attr("data_left");
	$("#pageNum").html(num);
	$("#sizeNum").html(size);
	$("#searchNum").html(search);
	$("#leftNum").html(left);
	$("#pager").show();
	if(num == 1){
		$("#previous").addClass("disabled");
	} else {
		$("#previous").removeClass("disabled");
	}
	if(left > 0){
		$("#next").removeClass("disabled");
	} else {
		$("#next").addClass("disabled");
	}
	// 展示数据
	$("#page_"+pageNum).show().siblings("tbody").hide();
}
// 上一页
function previous(){
	if(!$("#previous").hasClass("disabled")){
		showPage(pageNum - 1);
	}
}
// 下一页
function next(){
	if(!$("#next").hasClass("disabled")){
		if($("#data_"+(pageNum+1)).length > 0){
			showPage(pageNum+1);
		} else {
			searchMessage(true);
		}
	}
}
// 消息搜索
function searchMessage(append){
	$("#append").val(append);
	post('${request.contextPath}/msg/search', $("#msgSearchForm").serialize(), function(data){
		if(!append){
			$("#dataTable tbody").remove();
			$("#dataTable input").remove();
		}
       	$("#dataTable").append(data);
    });
}
// 轨迹
var trackOption = {};
function track(msg){
	if(myTrackChart){
		myTrackChart.dispose();
	}
	msg.cid = $("#cid").val();
	msg.topic = $("#topicDiv").val();
	msg.tid = ${RequestParameters.tid};
	post('${request.contextPath}/msg/track',
		msg,
       	function(data){
			setTrackOption(msg);
			$("#scriptDiv").html(data);
			drawTrackTopology();
	    }
    );
}
function resetSize(size){
	var width = 0;
	var height = 0;
	if(size <= 1){
		width = 800;
		height = 200;
	} else if(size <= 2){
		width = 800;
		height = 400;
	} else {
		width = 1000;
		height = 600;
	}
	$("#trackSize").attr("style", "width:"+width+"px;height:"+height+"px;");
	$("#trackDiv").attr("style", "width:"+(width-20)+"px;height:"+height+"px;");
}
function appendTrackOption(name, status, ex, size, idx){
	var consumerY = 800;
	var symbolSize = 100;
	if(size == 1){
		
	} else if(size == 2){
		symbolSize = 90;
		consumerY = 400;
	} else {
		symbolSize = [80, 28];
		consumerY = 800/size;
	}
	trackOption.series[0].data.push({
        name: name,
        x: 1000,
        y: idx * consumerY + consumerY / 2,
        _tooltip: "consumer",
        symbolSize: symbolSize,
        itemStyle : {
        	normal: {
                color: 'rgb(255,182,13)'
            },
            emphasis: {
                barBorderWidth: 1,
                shadowBlur: 20,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
            }
        },
        label : {
        	color: '#000',
        	textShadowColor: '#808A87',
        	textShadowBlur : '3'
        }
	});
	
	var color = "#000";
	var fontWeight = "normal";
	if(status.indexOf("消费成功") == -1){
		color = "red";
		fontWeight = "bold";
	}
	trackOption.series[0].links.push({
        source: 1,
        target: idx + 2,
        _tooltip: ex,
        lineStyle : {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgb(255,182,0)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgb(255,182,13)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            },
            type : 'dotted'
        },
        label: {
            show: true,
            color : color,
            fontWeight: fontWeight,
            formatter: function (){
            	return status;
            }
        }
    });
}
var myTrackChart = null;
function drawTrackTopology(){
	var dom = document.getElementById("trackDiv");
	myTrackChart = echarts.init(dom);
	myTrackChart.setOption(trackOption, true);
}
$(function(){
	$("[data-toggle='tooltip']").tooltip({container: 'body'});
});
function setTrackOption(msg){
	trackOption = {
	    tooltip: {
	    	confine: true,
	    	enterable: true,
	    	trigger : 'item',
	    	backgroundColor : 'white',
	    	padding : 0,
	    	textStyle: {
	    		color: 'no',
	    	},
	    	borderWidth: 1,
	    	formatter: function (params, ticket, callback) {
	    		return params.data._tooltip;
	    	}
	    },
	    animationDurationUpdate: 1000,
	    animationEasingUpdate: 'quinticInOut',
	    series : [
	        {
	            type: 'graph',
	            layout: 'none',
	            roam: true,
	            label: {
	                normal: {
	                    show: true
	                }
	            },
	            edgeSymbol: ['circle', 'arrow'],
	            edgeSymbolSize: [4, 10],
	            edgeLabel: {
	                normal: {
	                    textStyle: {
	                        fontSize: 12
	                    }
	                }
	            },
	            data: [
	            {
	                name: msg.client,
	                x: 0,
	                y: 400,
	                symbolSize: 100,
	                _tooltip: "producer",
	                itemStyle : {
	                	normal: {
	                        color: 'rgb(255,99,2)'
	                    },
	                    emphasis: {
	                        barBorderWidth: 1,
	                        shadowBlur: 20,
	                        shadowOffsetX: 0,
	                        shadowOffsetY: 0,
	                        shadowColor: 'rgba(0,0,0,0.5)'
	                    }
	                }
		        },
	            {
	                name: msg.broker,
	                x: 500,
	                y: 400,
	                symbolSize: 150,
	                _tooltip: "broker",
	                itemStyle : {
	                	normal: {
	                    	color: {
	                    	    type: 'linear',
	                    	    x: 0,
	                    	    y: 0,
	                    	    x2: 0,
	                    	    y2: 1,
	                    	    colorStops: [{
	                    	        offset: 0, color: 'rgb(255,99,0)' // 0% 处的颜色
	                    	    }, {
	                    	        offset: 1, color: 'rgb(255,182,0)' // 100% 处的颜色
	                    	    }],
	                    	    globalCoord: false // 缺省为 false
	                    	}
	                    },
	                    emphasis: {
	                        barBorderWidth: 1,
	                        shadowBlur: 20,
	                        shadowOffsetX: 0,
	                        shadowOffsetY: 0,
	                        shadowColor: 'rgba(0,0,0,0.5)'
	                    }
	                }
	            }
	           ],
	            links: [
	            {
	                source: 0,
	                target: 1,
	                _tooltip: "生产时间",
	                lineStyle : {
                    	color: {
                    	    type: 'linear',
                    	    x: 0,
                    	    y: 0,
                    	    x2: 0,
                    	    y2: 1,
                    	    colorStops: [{
                    	        offset: 0, color: 'rgb(255,99,2)' // 0% 处的颜色
                    	    }, {
                    	        offset: 1, color: 'rgb(255,99,0)' // 100% 处的颜色
                    	    }],
                    	    globalCoord: false // 缺省为 false
                    	},
                    	type : 'dotted'
	                },
	                label: {
	                    show: true,
	                    formatter: function (){
	                        return formatDate(msg.born);
	                    }
	                }
	            }
	           	]
	            ,lineStyle: {
	                normal: {
	                    opacity: 0.9,
	                    width: 2,
	                    curveness: 0
	                }
	            }
	        }
	    ]
	};
}
</script>